<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 奖项分配
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
              
                 <el-select v-model="query.awardsId" class="handle-select mr10" placeholder="奖项" @change="awardsChange">
                    <el-option
                    v-for="item in awardsOptinos"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                
                <el-button 
                    type="primary"
                    icon="el-icon-refresh"
                    class="handled-del mr10"
                    @click="handleReset"
                >重置</el-button>
            </div>
            <el-table
                v-loading="loading2"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0,0,0,0.8)"
                :data="tableList"
                border
                
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="id" label="ID" width="150" align="center"></el-table-column>
                <el-table-column prop="awardsName" label="奖项" align="center" width="300"></el-table-column>
                <el-table-column prop="className" label="班级" width="300" align="center"></el-table-column>
                <el-table-column prop="classNum" label="班级名额" width="200" align="center"></el-table-column>
                <el-table-column prop="remark" label="奖项备注" width="300" align="center"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

    </div>
    
</template>

<script>
import{selectAwardsByClassId,selectMyAwards} from "@/api/myAwards.js";
import Qs from  'qs' 

export default {
    name: 'honor',
    data() {
        return {
            date: '',
            //查询参数
            query: {
                awardsId:null,
                classId: null,
                pageIndex: 1,
                pageSize: 10,
            },


            //新增和编辑弹框标题
            dialogstate: "",
            // 遮罩层
            loading2: false,
            //表格数据

            //表格
            tableList:[],
            //
            flag:true,
            //类型
            awardsOptinos:[],
            // 状态

            // 批量删除按钮是否可以点击
            isDisabled: true,
            isCheck : false,
            // 存放批量删除用户
            multipleSelection: [],
            //编辑框是否显示
            dialogFormVisible:false,
            //列表总数
            pageTotal: 0,
            form: {
                awardsId:undefined,
                classId:undefined,
                className:undefined,
                awardsNum:undefined,
                classNum:undefined,
                remark:undefined,
            },
        };
    },
    watch: {
        // 监听最后一页删除最后一条数据时，当前页不变情况
        pageTotal(){
            if(this.pageTotal==(this.query.pageIndex-1)*this.query.pageSize && this.pageTotal!=0){
                this.query.pageIndex-=1;
                this.getData();
            }
        }
    },
    created() {
        this.getData();
        this.getMyAwards();
    },
    mounted(){

    },
    methods: {
        //获得所有类型
        getMyAwards(){
            const userInfo = localStorage.getItem("userInfo");
            const user = JSON.parse(userInfo);
            this.query.classId = user.classId;
            const _this = this;
            selectMyAwards(this.query.classId).then((res)=>{
                let type = res.data;
                _this.awardsOptinos =  type.map((item) => {
                    //组装，只需要id和name
                    return { value: item.awardsId,label: item.awardsName };
                });
            })
        },
        handleReset(){
            this.query.awardsId = null;
            this.getData();
        },
        
		//获取列表数据
		  getData(){            
            const userInfo = localStorage.getItem("userInfo");
            const user = JSON.parse(userInfo);
            this.query.classId = user.classId;
            const _this = this
            this.loading2 = true
            selectAwardsByClassId(this.query).then((res)=>{
			    console.log(res)
			    _this.tableList = res.data;
                _this.pageTotal = res.data.length;
            }).catch((err) => {
			        console.log('请求失败'+err)
			    });

            this.loading2 = false;
        },
        //搜索
        handleSearch(){
            this.$set(this.query,'pageIndex',1);
            this.getData();
        },
        

        // 拉改变
        awardsChange(){
            this.getData();
        },


       
        // 分页导航
        handlePageChange(pageIndex){
            this.query.pageIndex = pageIndex
            this.getData();
        },
        //表单重置
        resetForm(){

            this.form = {
                className: undefined,
                awardsId: undefined,
                classId:undefined,
                awardsNum:undefined,
                classNum:undefined,
                remark:undefined,
            }
            this.$nextTick(()=>{
                this.$refs.form.resetFields();
            })
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
